<template>
  <div class="mainMenu">
    <el-menu active-text-color="#4e6ef2" background-color="#000" class="el-menu-vertical-demo" default-active="38"
      text-color="#ffffff">
      <template v-for="item in menuData" :key="item.id">
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <i v-if="item.icon" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.id + ''">
                {{ subItem.name }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item :index="item.id + ''">
            {{ item.name }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang='ts'>
import localCache from '@/utils/cache'
import { computed } from 'vue'

const menuData = computed(() => localCache.getCache('userMenu'))

</script>

<style lang='scss' scoped>
.mainMenu {}
</style>
